/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
//主色
$uni-color-primary: #2DCC70;//#007aff
//成功
$uni-color-success: #2DCC70;//#4cd964
//警告
$uni-color-warning: #f0ad4e;
//错误
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;

/* flex高级样式封装 start */
/*横向排版-上下居中*/
%flex-x-tb-c {display: flex;flex-direction: row;align-items: center;}
/*横向排版-上下左右居中*/
%flex-x-c {display: flex;flex-direction: row;justify-content: center;align-items: center;}
/*横向排版-上下居中左右分布均匀*/
%flex-x-lr {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
/*横向排版-左右分布均匀*/
%flex-x-lr2 {display: flex;flex-direction: row;justify-content: space-between;}
/*横向排版-左右分布均匀溢出换行*/
%flex-x-lr3 {display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;} 
/*横向排版-溢出换行*/
%flex-x {display: flex; flex-wrap: wrap;} 
/*横向排版-上下居中靠左分布*/
%flex-x-lc {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}
/*竖向排版-垂直居中*/
%flex-y-c {display: flex;flex-direction: column;align-items: center;}
/*竖向排版-垂直居中靠左分布*/
%flex-y-lc {display: flex;flex-direction:column;justify-content: flex-start;align-items: center;}
/*竖向排版-垂直靠左分布*/
%flex-y-l {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;}
/*竖向排版-垂直上下分布*/
%flex-y-lc2 {display: flex; flex-direction: column;justify-content: space-between;align-items: center;}
/*竖向排版-垂直居中靠右分布*/
%flex-y-lc3 {display: flex;flex-direction: column;justify-content: flex-end;align-items: center;}
/*竖向排版-垂直靠右分布*/
%flex-y-r {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-end;}
/* flex高级样式封装 end */

/* 常用色值 start */
$cmain: #2DCC70;
$c333: #333333;
$c666: #666666;
$c999: #999999;
$cfff: #ffffff;
$c000: #000000;
/* 常用色值 end */

/*z-index属性默认值*/
/*悬浮顶部或底部的默认使用999*/
$zIndex999: 999;
/*弹窗默认使用999*/
$zIndex1030: 1030;

/* 基础样式封装 start */

/*颜色样式封装*/
.cmain {color: $cmain;}
.c333 {color: $c333;}
.c666 {color: $c666;}
.c999 {color: $c999;}
.cfff {color: $cfff;}
.c000 {color: $c000;}
.cdel {text-decoration: line-through;}

/*背景色样式封装*/
.bcmain {background: $cmain;}
.bc333 {background: $c333;}
.bc666 {background: $c666;}
.bc999 {background: $c999;}
.bcfff {background: $cfff;}
.bc000 {background: $c000;}

/*字体大小样式封装*/
.fs20 {font-size: 20rpx!important;}
.fs24 {font-size: 24rpx!important;}
.fs26 {font-size: 26rpx!important;}
.fs28 {font-size: 28rpx!important;}
.fs30 {font-size: 30rpx!important;}
.fs32 {font-size: 32rpx!important;}
.fs34 {font-size: 34rpx!important;}
.fs36 {font-size: 36rpx!important;}
.fs38 {font-size: 38rpx!important;}
.fs40 {font-size: 40rpx!important;}
.fbold {font-weight: bold}

/*外边距margin样式封装*/
.mt10 {margin-top: 10rpx}
.mt15 {margin-top: 15rpx}
.mt20 {margin-top: 20rpx}
.mt30 {margin-top: 30rpx}
.mt60 {margin-top: 60rpx}

.mb10 {margin-bottom: 10rpx}
.mb15 {margin-bottom: 15rpx}
.mb20 {margin-bottom: 20rpx}
.mb30 {margin-bottom: 30rpx}

.ml10 {margin-left: 10rpx}
.ml15 {margin-left: 15rpx}
.ml20 {margin-left: 20rpx}
.ml30 {margin-left: 30rpx}
.ml-auto {margin-left: auto;}

.mr10 {margin-right: 10rpx}
.mr15 {margin-right: 15rpx}
.mr20 {margin-right: 20rpx}
.mr30 {margin-right: 30rpx}
.mr-auto {margin-right: auto;}

/*左右外边距*/
.mx10 {margin-left: 10rpx;margin-right: 10rpx;}
.mx15 {margin-left: 15rpx;margin-right: 15rpx;}
.mx20 {margin-left: 20rpx;margin-right: 20rpx;}
.mx30 {margin-left: 30rpx;margin-right: 30rpx;}

/*上下外边距*/
.my10 {margin-top: 10rpx;margin-bottom: 10rpx;}
.my15 {margin-top: 15rpx;margin-bottom: 15rpx;}
.my20 {margin-top: 20rpx;margin-bottom: 20rpx;}
.my30 {margin-top: 30rpx;margin-bottom: 30rpx;}

.m15 {margin: 15rpx;}
.m30 {margin: 30rpx;}

/*内边距padding*/
.pt10 {padding-top: 10rpx}
.pt20 {padding-top: 20rpx}
.pt30 {padding-top: 30rpx}

.pb10 {padding-bottom: 10rpx}
.pb20 {padding-bottom: 20rpx}
.pb30 {padding-bottom: 30rpx}

.pl10 {padding-left: 10rpx}
.pl20 {padding-left: 20rpx}
.pl30 {padding-left: 30rpx}

.pr10 {padding-right: 10rpx}
.pr20 {padding-right: 20rpx}
.pr30 {padding-right: 30rpx}

.p10 {padding: 10rpx;}
.p15 {padding: 15rpx;}
.p20 {padding: 20rpx;}
.p30 {padding: 30rpx;}

/*左右内边距*/
.px10 {padding-left: 10rpx;padding-right: 10rpx;}
.px15 {padding-left: 15rpx;padding-right: 15rpx;}
.px20 {padding-left: 20rpx;padding-right: 20rpx;}
.px30 {padding-left: 30rpx;padding-right: 30rpx;}

/*上下内边距*/
.py10 {padding-top: 10rpx;padding-bottom: 10rpx;}
.py15 {padding-top: 15rpx;padding-bottom: 15rpx;}
.py20 {padding-top: 20rpx;padding-bottom: 20rpx;}
.py30 {padding-top: 30rpx;padding-bottom: 30rpx;}


/* flex 布局 */
.flex {display:flex;flex-direction:row!important;}
.flex-row {display:flex;flex-direction:row!important;}
.flex-column {display:flex;flex-direction:column!important;}
.flex-row-reverse {display:flex;flex-direction:row-reverse!important;}
.flex-column-reverse {display:flex;flex-direction:column-reverse!important;}
.flex-wrap {display:flex;flex-wrap: wrap;}
.flex-nowrap {display:flex;flex-wrap: nowrap;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center;}
.align-center {align-items: center;}
.align-stretch {align-items: stretch;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.align-baseline {align-items: baseline;}
.content-start {align-content: flex-start;}
.content-end {align-content: flex-end;}
.content-center {align-content: center;}
.content-between {align-content: space-between;}
.content-around {align-content: space-around;}
.content-stretch {align-content: stretch;}
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}
.flex-4 {flex: 4;}
.flex-5 {flex: 5;}
.flex-shrink {flex-shrink: 0;}

/* 文字划线 */
.text-through {text-decoration:line-through;}
/* 文字对齐 */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

/*一行文字溢出隐藏*/
.line-h1 {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}
.line-h2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.line-h3 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

/* 间隔块 */
.line10 {background-color: #F5F5F5;height: 10rpx;width: 100%;}
.line20 {background-color: #F5F5F5;height: 20rpx;width: 100%;}

/* 边框 */
.border {border-width: 1px;border-style: solid;border-color: #ECECEC;}
.border-cmain {border-width: 1px;border-style: solid;border-color: $cmain;}

.border-top {border-top-width: 1rpx;border-top-style: solid;border-top-color: #ECECEC;}
.border-right {border-right-width: 1rpx;border-right-style: solid;border-right-color: #ECECEC;}
.border-bottom {border-bottom-width: 1rpx;border-bottom-style: solid;border-bottom-color: #ECECEC;}
.border-left {border-left-width: 1rpx;border-left-style: solid;border-left-color: #ECECEC;}

/* 圆角 */
.rounded {border-radius: 8rpx;}
.rounded-10 {border-radius: 10rpx;}
.rounded-15 {border-radius: 15rpx;}
.rounded-30 {border-radius: 30rpx;}
.rounded-top {border-top-left-radius: 8rpx;border-top-right-radius: 8rpx;}
.rounded-right {border-top-right-radius: 8rpx;border-bottom-right-radius: 8rpx;}
.rounded-bottom {border-bottom-right-radius: 8rpx;border-bottom-left-radius: 8rpx;}
.rounded-left {border-top-left-radius: 8rpx;border-bottom-left-radius: 8rpx;}
.rounded-circle {border-radius: 100%;}

/* 定位 - 固定顶部 */
.fixed-top {position: fixed;top: 0;right: 0;left: 0;z-index: $zIndex999;}
/* 定位 - 固定底部 */
.fixed-bottom {position: fixed;right: 0;bottom: 0;left: 0;z-index: $zIndex999;}

/* 阴影 */
.shadow {box-shadow: 0px 0px 10rpx rgba(153, 153, 153, 0.1);}

/* scroll-view */
.scroll-row {width: 100%;white-space: nowrap;}
.scroll-row-item {display: inline-block!important;}

/* 基础样式封装 end */

.wrap-main {
	background-color: #f5f5f5;
	color: $c666;
	font-size: 26rpx;
	line-height: 1.2;
	min-height: 100vh;
	width: 750rpx;
	overflow-x: hidden;
}

/*图标*/
.iconfont {
  font-size: 26rpx;
  color: $c333;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-align: center;
}

/*顶部状态栏高度*/
.status-bar-height {height: var(--status-bar-height);width: 100%;}

.view-height-100 {height: 100vh;}

.view-height-statusbar {height: calc(100vh - var(--status-bar-height));}

.view-height-statusbar-safearea {height: calc(100vh - var(--status-bar-height) - var(--safe-area-inset-bottom));}

// swiper在H5、iOS环境下一定要先给一个高度
.swiper-main {height: 100vh;}

.safe-area-view {
	height: 0rpx;
	padding-bottom: 0;
	padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
}

.w-100 {width: 100%;}
.h-100 {height: 100%;}
.border-box {box-sizing: border-box;}

.swiper-box {flex: 1;}
.swiper-item {height: 100%;width: 750rpx;}
